<template>
    <div>
        <div class="chart-wrapper" ref="chartBox" v-show="chartData.length > 0" style="width: 100%;"
            :style="{ height: (isFullscreen ? hHeight : 100) + 'rem' }"></div>
        <el-empty description="暂无数据" v-show="chartData.length == 0" :image-size="60" />
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from 'echarts'
import { debounce, nowSize } from "@/utils/util.js"
import { ElLoading, ElMessage } from "element-plus";
import screenfull from 'screenfull'
const hHeight = ref(0)
const isFullscreen = ref(false)

const chartBox = ref()
let myChart = ref(null)


// 传入数据
const props = defineProps({
    chartData: {
        type: Array,
        default: []
    },
    keyList: Array, // 显示值的参数
    xAxisName: String, // 横坐标名称
    option: Object,
    chartType: {
        type: Array,
        default: [{ type: "bar", name: "value" }]
    }, // 显示几个图
    orient: {
        type: String,
        default: "horizontal",
    },
    linerColor: {
        type: [String, Array],
        default: ["#11100e", "#11100e"]
    },
    unit: {
        type: Array,
        default: ["件", "元"]
    },
    twoYAxis: Boolean,
})

const resizeHandler = debounce(() => {
    if (myChart) {
        myChart.resize()
    }
}, 200)

onMounted(() => {
    setTimeout(() => {
        if (props.chartData.length == 0) return
        getChartData()
    }, 1000)
    isFullscreenFn()
    window.addEventListener("resize", resizeHandler)
    window.addEventListener("resize", isFullscreenFn)
    nextTick(() => {
        hHeight.value = document.documentElement.clientHeight - 980
    })
})

onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler)
    window.removeEventListener("resize", isFullscreenFn)
})

watch(() => props.chartData, (newVal, oldVal) => {
    getChartData()
})

const isFullscreenFn = () => {
    // 利用屏幕分辨率和window对象的内高度来判断兼容IE
    let winFlag = window.innerHeight === window.screen.height
    // 利用window全屏标识来判断 -- IE无效
    let isFull = window.fullScreen || document.webkitIsFullScreen

    if (isFull === undefined) {
        isFullscreen.value = winFlag
    } else {
        isFullscreen.value = winFlag || isFull
    }
    // console.log('1111111', winFlag);  // true全屏   false不是全屏
}

const getChartData = () => {
    let seriesData = [];
    let xAxisList = [];
    let legendList = [];
    props.chartData.forEach((t, v) => {
        xAxisList.push(t[props.xAxisName]);
    });
    props.chartType.forEach((item, index) => {
        legendList.push(item.name);
        let itemDate = [];
        props.chartData.forEach(function (t, v) {
            itemDate.push(t[item.code]);
        });
        seriesData.push({
            name: item.name,
            type: item.type,
            smooth: true,
            data: itemDate,
            // showSymbol: false,
            symbol: "emptyCircle",
            symbolSize: 6,
            avoidLabelOverlap: true,
            barWidth: nowSize(12), //柱图宽度
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#f6a689' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    global: false
                }
            },
            itemStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: props.orient === "horizontal" ? 1 : 0,
                    x2: props.orient === "horizontal" ? 0 : 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: item.linerColor
                                ? item.linerColor[0]
                                : props.linerColor[0],
                        },
                        {
                            offset: 1,
                            color: item.linerColor
                                ? item.linerColor[1]
                                : props.linerColor[1],
                        },
                    ],
                    global: false,
                },
                borderRadius: nowSize(0),
            },
            yAxisIndex:
                index == props.chartType.length - 1 && props.twoYAxis ? 1 : 0,
        });
    })

    nextTick(() => {
        initEcharts(legendList, xAxisList, seriesData)
    })

}

const initEcharts = (legendList, xAxisList, seriesData) => {
    myChart = echarts.init(chartBox.value)
    let option = {

        grid: {
            top: '8%',
            left: '2%',
            right: '2%',
            bottom: '14%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false,
            bottom: "1%",
            data: legendList,
            icon: "circle",
            itemWidth: nowSize(10),
            itemHeight: nowSize(10),
            textStyle: {
                color: "#7da0ca",
                fontSize: nowSize(12)
            }
        },
        xAxis: {
            type: "category",
            data: xAxisList,
            // boundaryGap: false,
            axisLabel: {
                show: true,
                color: "#7da0ca",
                fontSize: nowSize(12),
                fontWeight: 'bold'
            },
            axisLine: {
                lineStyle: {
                    color: "#dbdfe3"
                }
            }
        },
        yAxis: [
            {
                type: "value",
                name: props.unit[0],
                nameTextStyle: {
                    color: "#7da0ca",
                    fontSize: nowSize(12),
                },
                splitLine: {
                    lineStyle: {
                        width: nowSize(1),
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: nowSize(15),
                    color: "#7da0ca",
                    fontSize: nowSize(12),
                    fontWeight: 'bold'
                },
            },
            //右边y轴
            {
                show: props.twoYAxis,
                type: "value",
                name: props.unit[1],
                nameTextStyle: {
                    color: "#3399FF",
                    fontSize: nowSize(14),
                },
            },
        ],
        series: seriesData,
    }
    if (props.option) {
        option = Object.assign(option, props.option);
    }
    myChart.off("click");
    // myChart.on("click", function (params) {
    //     that.$emit("clickEchartIns", params); // 所选参数
    // });
    myChart.setOption(option, true)
}



</script>

<style scoped lang="less"></style>
